<template>
    <!-- 表单填写 -->
    <view class="xinguan-view">
        <view class="xinguan-flex">
            <text>姓名</text>
            <input placeholder="请输入姓名" placeholder-class="input-style" />
        </view>
        <view class="xinguan-flex">
            <text>身份证</text>
            <input placeholder="请输入身份证" placeholder-class="input-style" />
        </view>
        <view class="xinguan-flex">
            <text>手机号</text>
            <input placeholder="请输入手机号" type="number" placeholder-class="input-style" />
        </view>
        <view class="xinguan-flex">
            <text>现居地址</text>
            <picker mode="region" class="flex-left" @change="changeRegion">
                <view>
                    <text>请选择现居地址</text>
                    <image src="/static/other/gengduo.svg"></image>
                </view>
            </picker>
        </view>
        <view class="xinguan-flex">
            <text>现居详细地址</text>
            <input placeholder="请输入现居详细地址" placeholder-class="input-style" />
        </view>
        <view class="xinguan-flex">
            <text>疫苗人群分类</text>
            <picker mode="selector" class="flex-left" :range="rangeData" @change="changeSelector">
                <view>
                    <text>请选择疫苗人群分类</text>
                    <image src="/static/other/gengduo.svg"></image>
                </view>
            </picker>
        </view>
    </view>
    <!-- 预约时间 -->
    <view>
        <!-- 医院地址 -->
        <view class="reserve-address">
            <text class="reserve-name">云南省第一人民医院1号楼10楼</text>
            <text class="reserve-road">昆明市西山区金碧路100号</text>
            <view class="reserve-title">
                <text v-for='(item, index) in [" 北京科兴中维", "北京生物"]' :key="index">{{ item }}</text>
            </view>
        </view>
        <!-- 星期 -->
        <view class="Week">
            <view class="Week-flex" @click="ChooseWeek()">
                <view class="Week-style Week-sup checkstyle">
                    <text>周六</text>
                    <text>03-05</text>
                    <text>有号</text>
                </view>
            </view>
        </view>
        <!-- 时段 -->
        <view class="period-view">
            <text class="period-title">上午时段</text>
            <view class="Week-flex">
                <block>
                    <view class="Week-style Week-Down checkstyle" @click="ChooseTime()">
                        <text>12:00-16:00</text>
                        <text>剩余200</text>
                    </view>
                </block>
            </view>
        </view>
    </view>
    <!-- 底部按钮 -->
    <view style="height:300rpx"></view>
    <view class="submit">
        <text @click="Cancel">取消预约</text>
        <text @click="Submit">提交预约</text>
    </view>
</template>
    
<script setup lang="ts">
// 1.引入基础模块
import { ref, onMounted, reactive, toRefs } from 'vue'

let rangeData = reactive(['医疗卫生人员', '卫生系统内工作的其他人员', '因公出国人员',
    '对外劳务派遣人员', '留学生', '因私出国人员', '海关边检人员', '公安系统,消防人员',
    '党政机关,事业单位人员', '社区工作者', '教育工作者', '小学和中学学生', '其他人员'
])

</script>
    
<style>
/* 表单提交 */
@import url('../../common-style/form.css');

page {
    background-color: #f7f7f7;
}

/* 预约地址 */
.reserve-address {
    background-color: #ffffff;
    padding: 20rpx;
    margin: 20rpx;
    border-radius: 10rpx;
}

.reserve-address text {
    display: block;
}

.reserve-name {
    font-weight: bold;
}

.reserve-road {
    padding: 20rpx 0;
}

.reserve-title {
    display: flex;
    align-items: center;
}

.reserve-title text {
    background-color: #f7f7f7;
    padding: 5rpx 20rpx;
    font-size: 25rpx;
    margin-right: 10rpx;
}

.Week {
    background-color: #ffffff;
    padding: 20rpx;
    border-radius: 10rpx;
    margin: 20rpx;
    display: flex;
    align-items: center;
}

.Week-flex {
    display: flex;
}

.Week-style {
    display: flex;
    flex-direction: column;
    background: #f7f7f7;
    text-align: center;
    padding: 20rpx 0;
    border-radius: 10rpx;
    margin-right: 20rpx;
}

.Week-style text {
    padding: 3rpx;
}

.Week-sup {
    width: 150rpx;
}

.period-view {
    background-color: #ffffff;
    padding: 20rpx;
    border-radius: 10rpx;
    margin: 20rpx;
}

.period-title {
    font-weight: bold;
    margin-bottom: 20rpx;
    display: block;
}

.Week-Down {
    width: 200rpx;
}

/* 选中加上样式 */
.checkstyle {
    background-color: #2c76ef !important;
    color: #ffffff !important;
}
</style>